import { View } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import { useState } from 'react'

// 获取唯一值
export function createUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

// 数据 驱动 UI
function Taiji() {
  const [circles, setCircle] = useState<any[]>([])
  //控制太极图旋转的 
  const [rotate,setRotate] = useState('taiji')
  const [data,setData] = useState(0)
  const [num, setNum] = useState(1)

  function click() {
    if (data === 0){
      setRotate('taiji rotate')
      setData(1)
    }
    if (data === 1){
      setRotate('taiji')
      setData(0)
    }
  }
  function end() {
    
  }
  function speedUP() {
    setNum(num + 1)
  }

  function clickHandler(e) {
    const key = createUUID()
    // 作业：熟悉操作数组的方法  push  pop  map  shift  unshift  filter includes reduce  concat  sort forEach
    let point = { ...e.touches[0], key }
    circles.push(point)
    setCircle([...circles])
  }

  function animationendhandler(key: string) {
    const _arr = circles.filter((point) => point.key != key)
    setCircle(_arr)
  }

  return (
    <View className="index" onClick={clickHandler}>
      {
        circles.map((circle) => (
          <View 
            className='circle'
            key={circle.key}
            // 缩放 -- 位置
            style={{ left: circle.clientX-25+'px', top: circle.clientY-25+'px' }}
            onAnimationEnd={() => { animationendhandler(circle.key) }}
          ></View>
        ))
      }
      <View className={rotate} onClick={click} onTransitionEnd={end} >
        <View className='white'></View>
        <View className='black'></View>
      </View>
      <View className='btn' onClick={speedUP}>点击加速</View>
      <View className='opac' style={{opacity: `${num}`}}></View>
    </View>
  )
}

export default Taiji

// 盒子模型
// border-box
// 边框/背景
// flex